<template>
    <div>
        <h1>这里是父组件</h1>
        
        <el-form-item label="父组件的值">
            <el-input v-model="msg" />
        </el-form-item>
        <el-form-item label="子组件Child的值">
            <el-input v-model="msgFromChild" />
        </el-form-item>

        <el-row :gutter="20">
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerChildClick"></Child>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <h2>待办清单</h2>
                    <to-do @to-list="addList" @remove-all="removeAll" ></to-do>
                    <ul>
                        <li v-for="(item,index) in list">{{ index+1 }}-{{ item }}</li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import LoginVue from '@/components/Login.vue'
import {ref} from 'vue'
import Child from './components/Child.vue'
import ToDo from './components/ToDo.vue'

export default{
    name:'Event',
    components:{
        Child,
        ToDo
    },
    setup(){
        const msg=ref("我是父组件的值")
        const msgFromChild=ref("我是子组件的值")
        const list=ref([])
        const handlerChildClick=function (value) {
            msgFromChild.value=value
            console.log(value);
        }
        const addList=function(value){
            list.value.push(value)
        }
        const removeAll=function(){
            list.value=[]
        }
        return{
            msg,
            list,
            msgFromChild,
            handlerChildClick,
            addList,
            removeAll
        }
    }
}
</script>
<style>

</style>